<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <title>注册页面</title>
  <!--    引入格式文件-->
  <link rel="stylesheet" href="./css/reg.css" />
  <script src="../lib/jquery.js"></script>
</head>

<body>
  <style></style>
  <div class="rg_layout">
    <div class="rg_left">
      <p>新用户注册</p>
      <p>USER REGISTER</p>
    </div>
    <div class="rg_center">
      <div class="rg_form">
        <form action="#" method="post" id="form">
          <table>
            <tr>
              <td class="td_left"><label for="username">用户名</label></td>
              <td class="td_right">
                <input type="text" id="username" name="username" />
              </td>
            </tr>
            <tr>
              <td class="td_left"><label for="password">密码</label></td>
              <td class="td_right">
                <input type="password" id="password" name="password" />
              </td>
            </tr>
            <tr>
              <td class="td_left"><label for="phone">手机号</label></td>
              <td class="td_right">
                <input type="text" id="phone" name="phone" />
              </td>
            </tr>
            <tr>
              <td class="td_left"><label for="">性别</label></td>
              <td class="td_right">
                <label><input type="radio" name="sex" value="1" checked />男</label>&nbsp&nbsp&nbsp
                <label><input type="radio" name="sex" value="0" />女</label>
              </td>
            </tr>
            <tr>
              <td class="td_left"><label for="">是否VIP</label></td>
              <td class="td_right">
                <label><input type="radio" name="vip" value="1" />是</label>&nbsp&nbsp&nbsp
                <label><input type="radio" name="vip" value="0" checked />否</label>
              </td>
            </tr>
            <tr>
              <td class="td_left"><label for="question">密保问题</label></td>
              <td class="td_right">
                <input type="text" id="question" name="question" />
              </td>
            </tr>
            <tr>
              <td class="td_left"><label for="answer">密保答案</label></td>
              <td class="td_right">
                <input type="text" id="answer" name="answer" />
              </td>
            </tr>
            <tr>
              <td class="td_left"><label for="avatar">头像</label></td>
              <td class="td_right">
                <!-- 
                <input type="text" id="avatar" disabled />
                <button>选择图片</button><input type="file" hidden />
                -->
                <input type="file" id="file1">
                <!-- <button id="btnUpload">选择图片</button> -->
              </td>
            </tr>
            <tr>
              <td colspan="2" align="center">
                <input type="submit" value="立即注册" id="btn_sub" />
              </td>
            </tr>
          </table>
        </form>
      </div>
    </div>
    <div class="rg_right">
      <p>已有账号？<a href="/loginBaseCode/login.html" >立即登录</a></p>
    </div>
  </div>

</body>
<script>

  // form表单提交事件
  $('#form').on("submit", function (e) {
    e.preventDefault()
    // 表单值转换为字符串
    const data = $(this).serialize()
    console.log("data", data)
    $.ajax({
      type: "POST",
      url: "http://124.223.14.236:3001/api/user/reg",
      data: data,
      success: function (res) {
        console.log(res)
        if (!res.success) return alert("注册失败：" + res.msg)
        alert("注册成功")
        location.href = "/loginBaseCode/login.html";
      },
    })
  })
  // 上传图片
  $('#btn_sub').on('click', function () {
    // 把JO对象转换成原生DOM对象，就可以使用DOM当中的.files 属性(可以获取到选择的所有文件列表)
    let files = $('#file1')[0].files
    // 判断用户是否选择了文件
    if (files.length <= 0) {
      return alert('请您选择文件后上传！')
    }
    // 向'FormData'中追加文件
    let fd = new FormData()
    // fd.append(key,value) key代表接口提供的上传参数，value对应选择的文件列表
    fd.append('acatar', files[0])
    $.ajax({
      type: 'post',
      url: 'http://www.liulongbin.top:3006/api/upload/avatar',
      data: fd,
      // 不修改FormData对象的请求头类型
      contentType: false,
      //不修改FormData对象的url编码类型，以formData的数据类型进行上传
      processData: false,
      success: function (res) {
        console.log(res);
      }
    })
  })
  
</script>

</html>